<template>
	<div class="app-container">
		<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="68px">
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="queryParams.nickname" placeholder="昵称" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form> -->

		<el-row :gutter="10" class="mb8">
		</el-row>

		<el-table v-loading="loading" :data="tcList">
			<el-table-column label="产品名称" align="center" prop="productName" />
			<el-table-column label="价格" align="center" prop="productPrice" />
			<el-table-column label="产品定位" align="center" prop="productPositioning" />
			<el-table-column label="产品期限(天)" align="center" prop="productType" />
			<el-table-column width="200" fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="success" style="padding: 10px 10px;"
						@click="handleDetail(scope.row)">详情</el-button>
					<el-button size="mini" type="primary" style="padding: 10px 10px;"
						@click="upPrice(scope.row)">修改价格</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
			@pagination="getList" />
		<el-dialog title="详情" :visible.sync="DetailVisible" width="70%" :close-on-click-modal="false">
			<el-descriptions class="margin-top" title="" :column="2" border>
				<el-descriptions-item>
					<template slot="label">
						产品名称
					</template>
					{{tcDetail.productName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						价格
					</template>
					{{tcDetail.productPrice}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						产品定位
					</template>
					{{tcDetail.productPositioning}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						产品期限(天)
					</template>
					{{tcDetail.productType}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						对赌条款
					</template>
					{{tcDetail.du}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template slot="label">
						师资介入
					</template>
					{{tcDetail.teacherIntervention}}
				</el-descriptions-item>
			</el-descriptions>
			<div style="height: 10px;"></div>
			<!-- <el-descriptions class="margin-top" title="核心优势"></el-descriptions> -->
			<div style="font-size: 16px;color: #000;font-weight: 700;">核心优势</div>
			<div>
				<div v-for="it in tcDetail.advantageList" style="margin-top: 10px;">
					<div style="font-size: 16px;color: #1b277b;">{{it.value}}</div>
					<div>{{it.name}}</div>
				</div>
			</div>
		</el-dialog>
		<!-- 添加或修改用户配置对话框 -->
		<el-dialog title="修改价格" :visible.sync="open" width="600px" append-to-body @close="cancel">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="产品名称" prop="productName">
					<el-input disabled v-model="form.productName" placeholder="产品名称" maxlength="30" />
				</el-form-item>
				<el-form-item label="产品价格" prop="productPrice">
					<el-input v-model="form.productPrice" placeholder="产品价格" type="number" maxlength="30" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		tcListApi,
		xgPiceApi
	} from "@/api/all/userApi";
	export default {
		name: "Documentary",
		data() {
			return {
				// 遮罩层
				loading: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 0,
				// 是否显示弹出层
				open: false,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					nickname: ''
				},
				dialogVisible: false,
				tcList: [], //存取后端获取客户列表
				DetailVisible: false,
				tcDetail: {},
				form: {
					productName: '',
					productPrice: '',
					productId: ''
				},
				rules: {
					productPrice: [{
						required: true,
						message: "产品价格不能为空",
						trigger: "blur"
					}],
				}
			};
		},
		created() {
			this.getList();
			// console.log(this.$store.state.user.nickName, 'nickName');
		},
		methods: {
			// 修改价格
			upPrice(row) {
				console.log(row, 'row');
				this.form = {
					productName: '',
					productPrice: '',
					productId: ''
				}
				this.form.productName = row.productName
				this.form.productId = row.productId
				this.open = true
			},
			// 详情
			handleDetail(e) {
				console.log(e);
				this.tcDetail = e
				this.tcDetail.du = e.termsGamblingList.join(',')
				this.DetailVisible = true
			},
			/** 查询跟单详情列表 */
			getList() {
				this.loading = true;
				tcListApi(this.queryParams).then(response => {
					console.log(response, 'response');
					this.tcList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				// this.resetForm("queryForm");
				this.queryParams = {
						pageNum: 1,
						pageSize: 10,
						nickname: ''
					},
					this.handleQuery();
			},
			// 弹层取消
			cancel() {
				this.open = false
				this.$refs.form.resetFields();
			},
			// 弹层确定
			submitForm() {
				console.log(this.form, 'form');
				this.$refs["form"].validate(valid => {
					if (valid) {
						xgPiceApi(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.open = false;
							this.getList();
						});
					}
				});
			}
		}
	};
</script>
<style>
	.el-tooltip__popper {

		max-width: 800px;

	}

	::v-deep .el-upload-list__item .is-success.focusing .el-icon-close-tip {
		display: none !important;
	}

	.el-upload--picture-card {
		width: 100%;
		height: 100%;
	}

	.el-upload {
		display: block;
	}

	.el-upload-dragger {
		width: 100%;
		height: 100%;
	}
</style>